<!--24小时变化曲线 -->
<template>
    <common-border-large width="100%" height="100%" text="园区能耗统计">
        <CommonTitleComponent text="24小时变化曲线" style="margin-top: 1%"></CommonTitleComponent>
        <div class="futureFlex">
            <chart-view
                class="lineWidth"
                :chart-option="state.chartOption"
                :auto-resize="true"
                height="100%"
                style="height: 95%"
            ></chart-view>
            <div class="fr">
                <CustomGreenInitiativeCommonLoadDownList
                    :list="state.list"
                    @list-item="listItems"
                ></CustomGreenInitiativeCommonLoadDownList>
            </div>
        </div>
    </common-border-large>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { EchartsMethods } from '@/chart/index';
// 园区能耗统计

const state = reactive({
    chartOption: {},
    future: {
        type: 'future2',
        isStatistics: {
            bottom: '15%',
            top: '13%',
            left: '6%',
            right: '3%'
        },
        seriesList: [
            {
                name: '8:00',
                value: 175.17
            },
            {
                name: '9:00',
                value: 148.35
            },
            {
                name: '10:00',
                value: 95.36
            },
            {
                name: '11:00',
                value: 56
            },
            {
                name: '12:00',
                value: 45
            }
        ]
    },
    list: [{ name: 'PM2.5' }, { name: 'PM10' }, { name: 'CO' }, { name: '甲醛' }]
});
state.chartOption = EchartsMethods.future1(state.future);
const listItems = (e: any) => {
    state.chartOption = EchartsMethods.future1(state.future);
};
</script>

<style scoped lang="scss">
.futureFlex {
    display: flex;
    align-items: center;
    height: 90%;
    width: 100%;
    .lineWidth {
        width: 650px;
    }
    .fr {
        flex: 1;
    }
}
</style>
